<template>
  <div class="product-list">
    <!-- 上部分 -->
    <div class="product-list-header" ref="listheader">

      <!-- 头部搜索 -->
      <search-bar ref="topbar" :value="searchText" @input="getText" />

      <!-- 排序 -->
      <section class="select-menu">
        <div class="select-item" :class="{'active':orderBy==='default'}" data-orderBy="default" @click="selectOrder">
          默认排序
        </div>
        <div class="select-item" :class="{'active':orderBy==='price_asc'}" data-orderBy="price_asc" @click="selectOrder">
          升序
          <i class="iconfont iconfont-xiangshang"></i>
        </div>
        <div class="select-item" :class="{'active':orderBy==='price_desc'}" data-orderBy="price_desc" @click="selectOrder">
          降序
          <i class="iconfont iconfont-xiangxia"></i>
        </div>
        <div class="select-item">
          筛选
          <i class="iconfont iconfont-shaixuan"></i>
        </div>
      </section>
    </div>

    <!-- 商品列表 -->
    <!-- <section class="product-list">
      <div class="product-container">
        <van-card v-for="item in tempList" :key="item.id" :num="item.stock" :price="item.price" :desc="item.subtitle" :title="item.name" :thumb="item.imageHost+item.mainImage" :origin-price="item.originalPrice" @click="$router.push('/product/'+item.id)" :lazy-load=true />
      </div>
    </section> -->

    <!-- 下拉刷新 -->
    <section class="product-list">
      <div class="product-container">
        <van-pull-refresh ref="vanlist" v-model="isLoading" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <!-- <van-card v-for="item in productList" :key="item.id" :num="item.stock" :price="item.price" :origin-price="item.originalPrice" :desc="item.subtitle" :title="item.name" :thumb="item.imageHost + item.mainImage" @click="pushDetail(item)" /> -->
            <van-card v-for="item in tempList" :key="item.id" :num="item.stock" :price="item.price" :origin-price="item.originalPrice" :desc="item.subtitle" :title="item.name" :thumb="item.imageHost + item.mainImage" @click="$router.push('/product/'+item.id)" :lazy-load=true />
          </van-list>
        </van-pull-refresh>
      </div>
    </section>

  </div>
</template>

<script>
import Vue from 'vue';
import { Card, Lazyload, Toast } from 'vant';
import { getProductList } from "../../api/index";
import searchBar from "../../components/searchBar.vue";

Vue.use(Card, Lazyload, Toast);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true,
});

export default {
  data: function () {
    return {
      products: [],
      orderBy: 'default',
      searchText: '',
      tempList: [],
      loading: false,//上拉加载获取数据
      isLoading: false,//下拉刷新获取数据
      finished: false,
      pageSize: 10,
      pageNum: 1,
    }
  },
  methods: {
    // 默认，升序，降序排序按钮
    selectOrder(e) {
      let orderBy = e.currentTarget.getAttribute('data-orderBy')
      if (orderBy === this.orderBy) {
        return
      }
      this.orderBy = orderBy

      // 排序
      switch (orderBy) {
        case 'default':
          // axios 获取数据
          getProductList(res => {
            this.products = res.data.list;
            this.tempList = res.data.list;
          });
          break;
        case 'price_asc':
          this.products.sort(function (a, b) {
            return a.price - b.price;
          })
          break;
        case 'price_desc':
          this.products.sort(function (a, b) {
            return b.price - a.price;
          })
          break;
      }
    },
    // 商品搜索
    getText(val) {
      // 父组件接收值
      this.searchText = val;

      // 过滤products
      this.tempList = [];
      if (val.trim() == '') {
        this.tempList = this.products;
      } else {
        this.products.forEach(item => {
          if (item.name.includes(val.trim())) {
            this.tempList.push(item);
          }
        });
      }
    },
    // 上拉加载
    onLoad() {
      console.log('上拉加载');
      this.loading = true;//上拉加载获取数据
      this.getProductData({ pageSize: this.pageSize, pageNum: this.pageNum++ });
    },
    // 下拉刷新
    onRefresh() {
      this.isLoading = true;//下拉刷新获取数据
      this.pageNum = 1;
      this.getProductData({ pageSize: this.pageSize, pageNum: this.pageNum++ });
    },
    // 获取数据
    getProductData(params) {
      getProductList(params, (res) => {
        console.log(res);
        this.loading = false;
        if (res.data.list.length !== this.pageSize) {
          this.finished = true;
        }

        if (this.isLoading) {
          // 下拉刷新赋值新数据
          this.productList = res.data.list;
          this.tempList = res.data.list;
          this.isLoading = false;
          this.finished = false // 允许上拉加载
        } else {
          // 上拉加载更多 合并数据
          this.productList = this.productList.concat(res.data.list);
          this.tempList = this.productList.concat(res.data.list);
        }
      });
    },
  },
  mounted: function () {
    // axios 获取数据
    // getProductList(res => {
    //   this.products = res.data.list;
    //   this.tempList = res.data.list;
    // });


    this.$refs.vanlist.$el.style.height = window.screen.height - this.$refs.listheader.clientHeight - 50 + "px";

    // 触发下拉刷新 
    this.onRefresh()
  },
  components: {
    searchBar
  }
}
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin.scss";
// 头部
.product-list-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;

  .select-menu {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100px;
    background: #fff;

    .active {
      color: $red;
    }

    .select-item {
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;

      &.active {
        color: $red;
      }

      .iconfont-xiangshang {
        color: #999;
        padding-left: 10px;
        font-size: 22px;
      }

      .iconfont-xiangxia {
        @extend .iconfont-xiangshang;
        font-size: 22px;
      }

      .iconfont-shaixuan {
        @extend .iconfont-xiangshang;
        font-size: 28px;
      }
    }
  }
}

// 商品列表
// .product-list {
//   width: 100%;
//   .product-container {
//     position: absolute;
//     left: 0;
//     top: 220px;
//     text-align: left;
//     width: 100%;
//     overflow-y: scroll;
//     height: auto;
//   }
// }

.product-list {
  width: 100%;
  .product-container {
    position: absolute;
    left: 0;
    top: 220px;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: auto;
    .van-pull-refresh {
      overflow-y: scroll;
    }
    // .van-list {
    // height: 100%;
    // overflow-y: scroll;
    // }
  }
}
</style>